<template>
  <div>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>编辑内容</el-breadcrumb-item>
        <el-breadcrumb-item>电影演员列表</el-breadcrumb-item>
        <el-breadcrumb-item>编辑电影演员</el-breadcrumb-item>
        <p><br></p>
      </el-breadcrumb>
    </div>
    <div style="text-align: left">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">

        <el-form-item label="电影名称" prop="movie">

          <el-select v-model="ruleForm.id" aria-colspan="300" placeholder="请选择电影">
            <el-option v-for="movie in movieList" :id="movie.id + ''" :label="movie.name" :value="movie.id">
              {{ movie.name }}
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="请选择演员" prop="selectedActorIdList">
          <el-checkbox-group v-model="selectedActorIdList">
            <el-checkbox v-for="actor in actorList" :id="actor.id + ''" :label="actor.id" name="selectedActorIdList">
              {{ actor.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditMoveAndActor",
  data() {
    return {
      actorList: [],
      movieList: [],
      selectedActorIdList: [],
      ruleForm: {
        id: '',
        actorIds: ''
      },
      rules: {
        id: [
          {required: true, message: '请选择一个电影', trigger: 'change'}
        ],

      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("this.ruleForm.id===" + this.ruleForm.id);
          console.log("this.selectedActorIdList===" + this.selectedActorIdList);
          for (let i = 0; i < this.selectedActorIdList.length; i++) {
            if (i == this.selectedActorIdList.length - 1) {
              this.ruleForm.actorIds += this.selectedActorIdList[i]
            } else {
              this.ruleForm.actorIds += this.selectedActorIdList[i] + ","
            }

          }
          this.$http.post("/api/movieAndActor/update", this.ruleForm)
              .then(res => {
                this.$router.push("/movieAndActorList")
              }).catch(res => {
            console.log(res);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cancel(){
      this.$router.push("/movieAndActorList")
    }
  },
  created() {
    this.$http.get("/api/movieAndActor/edit?movieId=" + this.$route.query.movieId).then(
        res => {
          this.actorList = res.data.actorList
          this.movieList = res.data.movieList
          // 得到电影的id便于知道现在修改的是哪个电影的演员
          this.ruleForm.id = res.data.movie.id
          // 得到这个电影的演员列表
          let actors = res.data.movie.actors
          // 把演员列表中每个演员的id都存到selectedActorIdList中,便于在页面中选中上次已选中的演员
          if (actors != null && actors.length > 0) {
            for (let i = 0; i < actors.length; i++) {
              this.selectedActorIdList[i] = actors[i].id;
            }
          }
        }
    );
  }
}
</script>

<style scoped>
#el-input {
  width: 400px;
}

.template_title {
  line-height: 40px;
  width: 500px;
  text-align: center;
  height: 60px;
  margin-top: 0px;
  font-size: 24px;
  color: #226655;
}
</style>